<template>
  <!-- 个人中心 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="13"></ceList>
      <div class="con">
        <div class="bianji">
            <div class="ming">我的认证</div>
            <div class="mrchantsCertification">
                <div class="authentication">
                  <div class="authentication-left">门店名称：</div>
                  <div>{{businessInformation.shopName}}</div>
                </div>
                 <div class="authentication" v-if="businessInformation.mainStoreShopName!=''&& businessInformation.mainStoreShopName">
                  <div class="authentication-left">连锁总店：</div>
                  <div>{{businessInformation.mainStoreShopName}}</div>
                </div>
                <div class="authentication">
                  <div class="authentication-left">门店类型：</div>
                  <div>{{businessInformation.shopType==1?'店铺':'楼盘'}}</div>
                </div>
                <div class="authentication">
                  <div class="authentication-left">办公区域：</div>
                  <div>{{businessInformation.shopArea}}</div>
                </div>
                <div class="authentication">
                  <div class="authentication-left">办公地址：</div>
                  <div>{{businessInformation.shopAddress}}</div>
                </div>
                <div class="authentication">
                  <div class="authentication-left">法人姓名：</div>
                  <div>{{businessInformation.contacts}}</div>
                </div>
                <div class="authentication">
                  <div class="authentication-left">门店联系电话：</div>
                  <div>{{businessInformation.shopPhone}}</div>
                </div>
                <div class="authentication">
                  <div class="authentication-left">联系人手机号：</div>
                  <div>{{businessInformation.contactsPhone}}</div>
                </div>
                <div class="certificationPictures">
                  <div class="title">门店封面图片</div>
                  <img class="surfacePlot" :src="businessInformation.image">
                </div>
                <div class="certificationPictures">
                  <div class="title">营业执照</div>
                  <img class="surfacePlot" :src="businessInformation.businessLicense">
                </div>
                <div style="display:flex;" v-if="businessInformation.idCardUp!='undefined' && businessInformation.idCardUp!=''">
                  <div class="certificationPictures" style="margin-right:70px">
                    <div class="title">法人身份证（信息面）</div>
                    <img class="surfacePlot" :src="businessInformation.idCardUp">
                  </div>
                  <div class="certificationPictures" v-if="businessInformation.idCardDown!='undefined' && businessInformation.idCardDown!=''">
                    <div class="title">法人身份证（国徽面）</div>
                    <img class="surfacePlot" :src="businessInformation.idCardDown">
                  </div>
                </div>
                <div style="display:flex;">
                  <div class="certificationPictures" style="margin-right:70px">
                    <div class="title">个人身份证（信息面）</div>
                    <img class="surfacePlot" :src="businessInformation.cardUp">
                  </div>
                  <div class="certificationPictures">
                    <div class="title">个人身份证（国徽面）</div>
                    <img class="surfacePlot" :src="businessInformation.cardDown">
                  </div>
                </div>
            </div>
            <div class="but" style="width:200px;" v-if="businessInformation.status==0">审核中，请耐心等待</div>
            <div class="but" @click="amend" v-else>修改</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
import axios from "axios";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
  },

  data() {
    return {
      businessInformation:{},
    };
  },
  created() {
   this.getShopInfo()
  },
   methods:{
    getShopInfo() {
      this.$getHttp("/mob/user/getShopInfoDetailByCopy", {
        id: JSON.parse(localStorage.getItem("userInfo")).shopId,
      }).then((res) => {
        this.businessInformation=res.shopInfo
      });
    },
    amend(){
      this.$router.push({path:'/index/merchantAttestation',query:{
        amend:1,
        id:this.businessInformation.userId,
      }})
    }
   }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}
.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;
  .bianji {
    padding-bottom: 65px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    .ming {
      width: 876px;
      height: 56px;
      line-height: 56px;
      font-size: 20px;
      background: #f2f2f2;
      text-indent: 23px;
      margin-left: 32px;
      margin-top: 24px;
      margin-bottom: 24px;
    }
    .lei {
      margin-top: 40px;
      .p {
        display: inline-block;
        vertical-align: unset;
        width: 100px;
        font-size: 20px;
        text-align: right;
        margin-left: 210px;
        margin-right: 70px;
        font-weight: 600;
      }
      .el-input {
        width: 220px;
        font-size: 18px;
        /deep/.el-input__inner {
          border: 0;
          color: #333;
          border-bottom: 1px solid #e0e0e0;
          box-sizing: content-box;
          /* padding-bottom: 15px; */
        }
      }
      .div {
        display: inline-block;
        margin-left: 40px;
        font-size: 20px;
        color: #2264d2;
        cursor: pointer;
      }
    }
    .wenben {
      width: 835px;
      margin-left: 52px;
      margin-top: 40px;
      h4 {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 20px;
      }
      p {
        font-size: 20px;
        line-height: 45px;
      }
    }
    .but {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background: #64b6a8;
      border-radius: 5px;
      color: #fff;
      text-align: center;
      font-size: 19px;
      cursor: pointer;
      margin-left: 395px;
      margin-top: 40px;
    }
  }
}
.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

}
.mrchantsCertification{
    margin-left: 32px;
    // border-left: 4px solid #64B6A8;
    // padding-left: 20px;
    // border-left: 1px soild #64B6A8;
}
.authentication{
  display: flex;
  font-size: 18px;
  margin-bottom: 15px;
  .authentication-left{
    color: #64B6A8 ;
  }
}
.certificationPictures{
  margin-top: 10px;
  .title{
    font-size:20px ;
    margin-bottom: 15px;
  }
  .surfacePlot{
    width: 300px;
    height:200px;
    border-radius: 15px;
  }
}
.but {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background: #64b6a8;
      border-radius: 5px;
      color: #fff;
      text-align: center;
      font-size: 19px;
      cursor: pointer;
      margin-left: 395px;
      margin-top: 40px;
    }
</style>
